
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      layout:decorate="~{admin/layout}">
<body>

<div class="content-wrap" layout:fragment="content">
    <style>
        .col-md-3 {
            width: 20%;
        }
        .imgtree{
            height: 20px;
            width: 20px;
        }
        .icon-list-item .glyphicon, .icon-list-item .fa {
            width: 20px;
            margin-right: 10px;
        }
        .form-actions {
            margin: 1rem 0 0;
            padding: 1rem;
            background-color: #fff;
        }
        .fa-unlock-alt{
            color: #c20000;
        }
    </style>
    <script th:src="@{/vendor/shufflejs/dist/jquery.shuffle.modernizr.min.js}"></script>
    <script th:src="@{/vendor/magnific-popup/dist/jquery.magnific-popup.min.js}"></script>
    <script th:src="@{/js/gallery.js}"></script>
    <main id="content" class="content" role="main">
        <ol class="breadcrumb">
            <li>苗木入库</li>
            <li class="active"><span class="fw-semi-bold"><span th:text="${landMass.areaLocation.serialNumber}+${landMass.serialNumber}"></span> 地块</span></li>
        </ol>
        <div class="col-lg-6">
            <div class="tab-pane" id="basic-put" role="tabpanel" aria-labelledby="assumtion-tab" aria-expanded="true">
                <form th:action="@{/admin/treeWell/put}" enctype="multipart/form-data" id="put-form"  class="form-horizontal form-label-left" method="post">
                   <input type="hidden" name="landMass_id" th:value="${landMass.landMass_id}">
                    <span class="label label-warning  text-gray-dark mr-xs">入库</span>信息
                    <fieldset>
                        <legend>
                        </legend>
                        <div class="form-group row">
                            <label class="control-label col-sm-3" for="basic">树木品种</label>
                            <div class="col-sm-9">
                                <input type="text" id="basic" name="treeSpecies" class="form-control" required="required">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="control-label col-sm-3" for="basic-change">
                                胸径/地径
                                <span class="help-block">
                                    </span>
                            </label>
                            <div class="col-sm-9">
                                <input type="text" id="basic-change" name="chestBreadth" class="form-control" required="required">
                            </div>
                        </div>
                    </fieldset>
                    <fieldset>
                        <div class="form-group row">
                            <label class="control-label col-sm-3" for="number" required="required">
                                冠幅
                            </label>
                            <div class="col-sm-9">
                                <input type="text"  name="crownWidth" id="guanfu" class="form-control">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="control-label col-sm-3" for="number">
                                高度
                            </label>
                            <div class="col-sm-9">
                                <input type="text" id="number" name="height" class="form-control" required="required">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="control-label col-sm-3">
                                枝条数量
                            </label>
                            <div class="col-sm-9">
                                <input type="text" id="zhitiao"  name="salenumber" class="form-control" >
                            </div>
                        </div>
                        <shiro:hasAnyRoles name="admin,finance">
                            <div class="form-group row">
                                <label class="control-label col-sm-3">
                                    价格
                                </label>
                                <div class="col-sm-9">
                                    <input type="text"   name="cost" class="form-control" >
                                </div>
                            </div>
                        </shiro:hasAnyRoles>
                        <div class="form-group row">
                            <label class="control-label col-sm-3" for="number">
                                备注
                            </label>
                            <div class="col-sm-9">
                                <input type="text"  name="remark" class="form-control">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="control-label col-sm-3" for="number">
                                图片上传
                            </label>
                            <div class="col-sm-9">
                                <input type="file" name="file" />
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="control-label col-sm-3" for="number">
                                是否丛生
                            </label>
                            <div class="col-md-6">
                                <div class="radio abc-radio abc-radio-danger">
                                    <input type="radio" name="clump" id="radio3" value="1" checked="">
                                    <label for="radio3">
                                        丛生
                                    </label>
                                </div>
                                <div class="radio abc-radio abc-radio-danger">
                                    <input type="radio" name="clump" id="radio4" value="2" >
                                    <label for="radio4">
                                        非丛生
                                    </label>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                    <fieldset>
                        <legend>
                           <span class="label label-warning  text-gray-dark mr-xs">选择</span>树坑
                        </legend>
                        <div id="list" th:each="treeWells :${treeWell}" class="icon-list-item col-md-3 col-sm-4" >
                            <div  th:if="${treeWells.salesState == 0}">
                                <p class="hidden-md-down" data-toggle="tooltip" data-html="true" th:data-original-title=" ${treeWells.serialNumber}" data-placement="bottom">
                                    <input th:id="${treeWells.serialNumber+'r'}" th:value="${treeWells.treeWell_id}" th:serialNumber=" ${treeWells.serialNumber}" class="puttree" type="checkbox" name="treeWell_id">
                                    <i class="fa fa-circle-o"></i>
                                    <img th:if="${treeWells.state==3}" class="suod" th:src="@{/img/锁.png}">
                                </p>
                            </div>
                        </div>
                    </fieldset>
                    <!--<input type="button" value="恢复" class="btn" id="recover">-->
                    输入范围:<input class="fanwei"  type="text" name="stat" id="stat" >~
                    <input class="fanwei" type="text" name="stop" id="stop" >
                    <input type="button" id="affirm" class="btn" value="确认">
                    <input type="button" value="全选" class="btn" id="selectAll">
                    <input type="button" value="复原" class="btn" id="unSelect">
                    <input class="btn btn-gray" style="width: 60px;margin-top: 0px;" data-toggle="modal" id="submit1" value="入库" data-target="#myModal18">
                    <script>
                        $(function () {
                            $("#submit1").click(function () {
                                var str='树种：<span>'+$("#basic").val()+'</span> ;&nbsp;&nbsp; ' +
                                    ' 胸径：<span>'+$("#basic-change").val()+'</span>-<span>'+$("#basic-changemax").val()+'</span> ;&nbsp;&nbsp;'+
                                    '冠幅：<span>'+$("#guanfu").val()+'</span>-<span>'+$("#guanfumax").val()+'</span> ;&nbsp;&nbsp;'+
                                    '高度：<span>'+$("#number").val()+'</span>-<span>'+$("#numbermax").val()+'</span> ;&nbsp;&nbsp;'+
                                    '枝条：<span>'+$("#zhitiao").val()+'</span>-<span>'+$("#zhitiao").val()+'</span>';

                                document.getElementById('huixian').innerHTML=str;
                                $("#subtype").val(1);
                                $(".frommodel").hide();
                                $(".puttree").each(function () {
                                    if($(this).is(':checked')){
                                        $('#q_'+$(this).attr("value")).show();
                                    }
                                });
                            });
                            $("#submit2").click(function () {
                                if($("#subtype").val()==1){
                                    if($("#basic").val()==""){
                                        alert("请填写树种");
                                        return false;
                                    }
                                    if($("#basic-change").val()==""){
                                        alert("请填写胸径");
                                        return false;
                                    }
                                    if($("#guanfu").val()==""){
                                        alert("请填写冠幅");
                                        return false;
                                    }
                                    if($("#number").val()==""){
                                        alert("请填写高度");
                                        return false;
                                    }
                                    if(number==""){
                                        alert('请选择入库树坑！');
                                        return false;
                                    }
                                    $("#put-form").submit();
                                }
                            });
                        });
                    </script>
                    <script>
                        $(".sanj").click(function () {
                            $.ajax({
                                url: "/admin/tree/getimg",
                                type: 'GET',
                                data:{"treeid":$(this).attr("value")},
                                async: false,
                                success: function (data) {
                                    if(data.length>26){
                                        $("#imgurl").attr("src",data);
                                    }else {
                                        $("#imgurl").hide();
                                        $("#err").show();
                                    }
                                },
                                error: function (xhr) {
                                    console.log("error")
                                }
                            });

                        });
                        var chk_value =[];
                        $("#selectAll").click(function () {
                            saveval();
                            $("#list :checkbox,#all").prop("checked", true);
                        });

                        $("#unSelect").click(function () {
                            saveval();
                            $("#list :checkbox,#all").prop("checked", false);
                        });

                        $("#recover").click(function () {
                            $("#list :checkbox,#all").prop("checked", false);
                            for(var i=0;i<chk_value.length;i++){
                                $('#'+chk_value[i]).prop("checked", true);
                            }

                        });

                        $("#affirm").click(function () {
                            saveval();
                            $("#list :checkbox,#all").prop("checked", false);
                            var stat=Number($("#stat").val());
                            var stop=Number($("#stop").val());
                            for(var i=stat;i<=stop;i++){
                                $('#'+i+"r").prop("checked", true);
                            }
                        });

                        function saveval(){
                            $('input[name="treeWell_id"]:checked').each(function(){
                                console.log($(this).attr("id"));
                                chk_value.push($(this).attr("id"));
                            });
                        }
                    </script>
                </form>
            </div>
            <div class="tab-pane" id="basic-out" role="tabpanel" aria-labelledby="assumtion-tab"  aria-expanded="false">
                    <script>
                        $(function () {
                            $("#puttree").click(function () {
                                var str="";
                                $("#subtype").val(2);
                                $(".frommodel").hide();
                                $(".tree").each(function (i, obj) {
                                    if($(this).is(':checked')){
                                        str=str+($(this).attr("value")+";");
                                        console.log($('#q_'+$(this).attr("treeWell_id")).show());
                                    }
                                });
                                $("#submit2").click(function () {
                                    if($("#subtype").val()==2){
                                        $.ajax({
                                            url: "/admin/tree/outtree",
                                            type: 'POST',
                                            data:{"treeids":str},
                                            async: false,
                                            success: function (data) {
                                                console.log(data);
                                                location.reload();
                                            },
                                            error: function (xhr) {
                                                console.log("error")
                                            }
                                        });
                                    }
                                });
                            });

                            $("#signtree").click(function () {
                                $("#priceandlocation").toggle();
                                console.log("log");
                                $("#priceadd").click(function(){
                                    var str="";
                                    $(".tree").each(function (i, obj) {
                                        if($(this).is(':checked')){
                                            str=str+($(this).attr("value")+";");
                                        }
                                    });
                                    if(str!=""){
                                        var price=$("#price").val();
                                        var remark=$("#remark").val();
                                        $.ajax({
                                            url: "/admin/tree/marktree",
                                            type: 'POST',
                                            data:{"treeids":str,"remark":remark},
                                            async: false,
                                            success: function (data) {
                                                console.log(data);
                                                location.reload();
                                            },
                                            error: function (xhr) {
                                                console.log("error")
                                            }
                                        });
                                    }
                                });
                            });

                            $("#dietree").click(function () {
                                var str="";
                                $(".tree").each(function (i, obj) {
                                    if($(this).is(':checked')){
                                        str=str+($(this).attr("value")+";");
                                    }
                                });
                                console.log(str);
                                $.ajax({
                                    url: "/admin/tree/dietree",
                                    type: 'POST',
                                    data:{"treeids":str},
                                    async: false,
                                    success: function (data) {
                                        console.log(data);
                                        location.reload();
                                    },
                                    error: function (xhr) {
                                        console.log("error")
                                    }
                                });
                            });

                            $("#updatetree").click(function () {
                                $("#updateinfo").toggle();
                                $("#sub").click(function(){
                                    var str="";
                                    $(".tree").each(function (i, obj) {
                                        if($(this).is(':checked')){
                                            str=str+($(this).attr("value")+";");
                                        }
                                    })
                                    if(str!=""){
                                        $("#treeids").val(str);
                                        $("#basic-out").submit();
                                    }
                                });

                            });
                        });
                    </script>
                </div>
            <div class="modal fade" id="myModal18" tabindex="-1" role="dialog" aria-labelledby="myModalLabel18" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h5 class="modal-title text-xl-center fw-bold mt" id="myModalLabel18">入库确认</h5>
                        </div>
                        <div id="huixian"></div>
                        <div class="modal-body bg-gray-lighter">
                            <div>
                                <div class="row icon-list">
                                    <input id="subtype" type="hidden">
                                    <div th:each="treeWells :${treeWell}" class="icon-list-item col-md-3 col-sm-4" >
                                        <div class="frommodel" style="display:none;" th:id="${'q_'+treeWells.treeWell_id}" th:if="${treeWells.salesState == 0}">
                                            <p class="hidden-md-down" data-toggle="tooltip" data-html="true"  th:data-original-title=" ${treeWells.serialNumber}" data-placement="bottom">
                                                <i class="fa fa-tree"></i>
                                            </p>
                                        </div>

                                        <div  class="frommodel" style="display:none;" th:id="${'q_'+treeWells.treeWell_id}" th:if="${treeWells.salesState == 1}">
                                            <p  class="hidden-md-down" data-toggle="tooltip" data-html="true" th:data-original-title="${treeWells.titles}" data-placement="bottom">
                                                <i class="fa fa-tree"></i>
                                            </p>
                                        </div>

                                        <div class="frommodel" style="display:none;" th:id="${'q_'+treeWells.treeWell_id}" th:if="${treeWells.salesState == 2}">
                                            <p  class="hidden-md-down" data-toggle="tooltip" data-html="true" th:data-original-title="${treeWells.titles}" data-placement="bottom">
                                                <i class="fa fa-tree"></i>
                                            </p>
                                        </div>

                                        <div  class="frommodel" style="display:none;" th:id="${'q_'+treeWells.treeWell_id}" th:if="${treeWells.salesState == 3}">
                                            <p  class="hidden-md-down" data-toggle="tooltip" data-html="true" th:data-original-title="${treeWells.titles}" data-placement="bottom">
                                                <i class="fa fa-tree"></i>
                                            </p>
                                        </div>

                                        <div  class="frommodel" style="display:none;" th:id="${'q_'+treeWells.treeWell_id}" th:if="${treeWells.salesState == 4}">
                                            <p  class="hidden-md-down" data-toggle="tooltip" data-html="true" th:data-original-title="${treeWells.titles}" data-placement="bottom">
                                                <i class="fa fa-tree"></i>
                                            </p>
                                        </div>

                                        <div  class="frommodel" style="display:none;" th:id="${'q_'+treeWells.treeWell_id}" th:if="${treeWells.salesState == 5}">
                                            <p  class="hidden-md-down" data-toggle="tooltip" data-html="true" th:data-original-title="${treeWells.titles}" data-placement="bottom">
                                                <i class="fa fa-tree"></i>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-actions">
                                    <button id="submit2" class="btn btn-danger btn-rounded pull-xs-right">提交</button>
                                    <button type="button" class="btn btn-gray" data-dismiss="modal">取消</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="myModal19" tabindex="-1" role="dialog" aria-labelledby="myModalLabel19" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        </div>
                        <img id="imgurl" style="height: 600px;width: 598px;">
                        <h5 id="err" style="display: none;text-align:center;">暂无图像 </h5>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>
</body>
</html>